<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*
      判断是否是对象:https://www.cnblogs.com/sunmarvell/p/9386075.html
      key作用：给每个节点做标志，方便后期的diff算法定位节点做差异性比较。


      虚拟DOM算法：内部准备虚拟DOM树
      需求：<h1 title="测试" data="自定义属性"><span>嘻嘻</span><h1>
        {
          ele : 'h1',
          key : 1,//相当于id,不能重复
          attr : {
            title : '测试',
            data : '自定义属性'
          },
          child : {
            ele : 'span',
            key : 2,
            attr : {},
            child : '哈哈'
          }
        }

        {
          ele : 'p',
          key : 1,
          attr : {
            title : '测试2',
            data : '自定义属性'
          },
          child : {
            ele : 'span',
            key : 2,
            attr : {},
            child : '嘻嘻'
          }
        }

        diff算法：如果节点都已经不同，不再对比子节点，全部删除重新插入，否则时间复杂度就非常大。

        function diff(obj) {
          for(let key in obj) {
            let ele = document.createElement(obj.ele);//<h1></h1>
            for(let key2 in obj.attr) {
              ele.setAttribute(key2,obj.attr[key2]);//<h1 title="测试" data="自定义属性"></h1>
            }
            if(obj.child instanceof Object) {
              //是对象
              diff(obj.child);
            }else{
              ele.innerHTML = obj.child;
            }
          }
          document.body.appendChild(ele);
        }
        


    */

    new Vue({
      el: "#app",
      data: {},
    });
  </script>
</html>
